<template>
  <div style="width: 100%;height: 100%">
    <div class="index__tips" id="index__tips" ref="index__tips" v-html="indexObj.tips">
    </div>
    <div class="index__title">请将您的脸部正面放置于下方提示区域，并点击“拍照”按钮。</div>
    <div class="index__video-panel">
      <!-- 显示摄像头拍摄到的视频 -->
      <video id="index__video" class="index__video"></video>
      <!-- 视频上的提示框 -->
      <svg width="200" height="200" class="index__video-over">
        <!-- 克莱因蓝 #002FA7 -->
        <polyline  points="5,50 5,5 50,5" fill-opacity="0"
                   style="stroke:#002FA7;stroke-width:10"/>
        <polyline  points="5,150 5,195 50,195"  fill-opacity="0"
                   style="stroke:#002FA7;stroke-width:10"/>
        <polyline  points="155,5 195,5 195,45"  fill-opacity="0"
                   style="stroke:#002FA7;stroke-width:10"/>
        <polyline  points="155,195 195,195 195,155"  fill-opacity="0"
                   style="stroke:#002FA7;stroke-width:10"/>
      </svg>
      <!-- 视频上的拍照按钮 -->
      <div class="index__video-over-button" @click="uploadImg">拍照并上传</div>
    </div>
    <!-- 用于给video标签截图的画布 -->
    <canvas ref="canvas" id="index__canvas" style="display:none;"></canvas>
  </div>

</template>

<script>
    export default {
        name: "FaceCamera"
      ,
      data(){
          return {
            indexObj:{tips:'没有检测到设备，请确保开启摄像头。'},
            userMedia:null,
            camera:null,
            imageInterval:null,
            successImage:''
          }
      },
      methods:{
        openVideo(){
          let g=this;
          if (g.userMedia){
            navigator.getUserMedia({video:{ width: 800, height: 450 }},
              function(stream) {
                g.indexObj.tips='没有检测到人脸';
                g.camera=stream.getTracks()[0];
                let video = document.getElementById("index__video");
                video.srcObject = stream;
                video.onloadedmetadata = function(e) {
                  video.play();
                };
                //开启定时器
                g.imageInterval=setInterval(g.uploadImg,3000);
              },
              function(err) {
                console.log("The following error occurred: " + err.name);
                document.getElementById("index__tips").innerHTML = indexObj.tips;
              }
            );
          }else{

          }
        }  ,
        uploadImg(){
          let g=this;
          var canvas = document.getElementById("index__canvas");
          var video = document.getElementById("index__video");
          if (0 == video.videoWidth) {
            return;
          }
          // 让canvas和视频一样宽高。
          var w = video.videoWidth;
          var h = video.videoHeight;
          canvas.width = w;
          canvas.height = h;
          // 把video标签中的画面，画到canvas中。
          var ctx = canvas.getContext('2d');
          ctx.drawImage(video, 0, 0, w, h);
          // 把canvas中的图像转换成png图片文件的Base64字符串。
          var imgStr = canvas.toDataURL('image/png').split("base64,")[1];
          this.$store.getters.socket.onmessage=(evt)=>{
            g.responseSocket(JSON.parse(evt.data).result,imgStr);
          }
          this.$store.getters.socket.send(imgStr)
        },
        closeVideo(){
          if (this.camera){
            this.camera.stop();
          }
        },
        //处理响应socket,成功触发success函数《否则是error
        responseSocket(message,imgStr){
          let g=this;
          if (message.face_num>=0){
            clearInterval(g.imageInterval);
            g.successImage=imgStr;
            g.indexObj.tips='当前人脸检测成功';
            g.message({message:'人脸检测成功',type:'success'})
            return g.$emit('success',g.successImage);
          }else{
            return g.$emit('error',g.successImage);
          }
        },
        //继续检测人脸
        continueDraw(){
          let g=this;
          g.openVideo();
        },
      },
      created() {
          console.log('我被打开了')
          this.userMedia=navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia;
      }
    }
</script>

<style scoped>
  .index__tips{
    width: 100%;
    color: red;
    font-size: 16px;
    font-family: "microsoft yahei";
    text-align: center;
  }

  .index__title{
    font-size: 20px;
    font-family: "microsoft yahei";
    margin: 0 auto;
    width: auto;
    text-align: center;
    padding: 10px 0 15px 0;
  }

  .index__video-panel{
    width: 380px;
    height: 300px;
    padding:0;border:0;
    z-index: 0;
    margin: 0 auto;
  }

  .index__video{
    width:380px;
    height:300px;
    position: relative;
    z-index: 0;
    /* float:left; */
  }

  .index__video-over{
    /* float:left; */
    position: relative;
    z-index:1;
    margin:-250px 0 54px 88px;
  }

  .index__video-over-button{
    position: relative;
    z-index:1;
    color: white;
    background-color:#002FA7;
    width: 100px;
    height: 30px;
    line-height: 30px;
    margin:-40px 0 0 175px;
    text-align: center;
    cursor: pointer;
  }
</style>
